<template>
    <div class="recognition-frequency">
        <ModalTitle title="智能识别次数" />
        <div class="num-asc">
            <div class="left">
                <div class="title">今日智能识别次数</div>
                <div class="number">{{ identifyNum }}<span
                        style="font-size: 1.4rem;color: #99A2AD;margin-left: 1rem;">次</span></div>
            </div>
            <div class="right">
                <div class="title">人脸识别实时次数</div>
                <div class="number">{{ realTimeNum }}<span
                        style="font-size: 1.4rem;color: #99A2AD;margin-left: 1rem;">次</span></div>
            </div>
        </div>
        <div class="total-box">
            <div class="t-left">
                <p>智能识别总数</p>
                <span>数据更新于{{ updateTime }}</span>
            </div>
            <div class="t-right">{{ TotalAllNum }}<span style="font-size: 1.4rem;color: #99A2AD;margin-left: 1rem;">次</span>
            </div>
        </div>
    </div>
</template>

<script>
// 智能识别次数
import ModalTitle from '@components/ModalTitle/Index.vue'
import { ZongHeZhiFaDB } from '@/api/zhangzi'
export default {
    components: { ModalTitle },
    data() {
        return {
            identifyNum: 0,  //智能识别次数
            realTimeNum: 0, //人脸识别实时次数
            updateTime: '',  //数据更新时间
            TotalAllNum: 0,  //智能识别总数
        }
    },
    created() {
        this.getIntelligentRecognition()
    },
    methods: {
        async getIntelligentRecognition() {
            const res = await ZongHeZhiFaDB.IntelligentRecognitionAPI()
            if (res.success) {
                this.identifyNum = res.data.todayRecognitionCount || 0
                this.realTimeNum = res.data.realTimeCount || 0
                this.updateTime = res.data.nowTime || '0000:00:00'
                this.TotalAllNum = res.data.totalRecognitionCount || 0
            } else {
                this.$message.error(res.message)
            }
        }
    },
}
</script>

<style lang="less" scoped>
.recognition-frequency {
    width: 100%;
    height: 273px;
    margin-bottom: 2rem;

    .num-asc {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 8.2rem;
        margin-top: 2.2rem;

        .left,
        .right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 200.6rem;
            height: 8.2rem;
            background-image: url('../../../../assets/images/zhangzi/tongji/jinri.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .title {
                width: 100%;
                height: 1.4rem;
                font-size: 1.4rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 0px;
                margin-bottom: 1.5rem;
                padding-left: 1.5rem;
            }

            .number {
                width: 100%;
                height: 1.6rem;
                font-size: 2rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #00FFFA;
                line-height: 0px;
                padding-left: 1.5rem;
            }
        }

        .right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 200.6rem;
            height: 8.2rem;
            background-image: url('../../../../assets/images/zhangzi/tongji/renlian.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .number {
                color: #00B1FB;
            }
        }
    }

    .total-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 7.5rem;
        margin-top: 2rem;
        background-image: url('../../../../assets/images/zhangzi/tongji/zhineng.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 0 2rem;

        .t-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 213px;
            height: 100%;

            >p {
                font-size:  1.8rem;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #26CAFF;
                margin-bottom: 1.5rem;
            }

            >span {
                font-size: 1.4rem;
                font-family: PingFangSC-Ultralight, PingFang SC;
                font-weight: 200;
                color: #C6C5C5;
            }
        }

        .t-right {
            flex: 1;
            height: 100%;
            text-align: center;
            line-height: 70.5rem;
            font-size: 2.4rem;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #26CAFF;
        }
    }
}
</style>